<template>
    <div>
        <el-card style="height: 75px;">
            <el-form :inline="true" class="form">
                <el-form-item label="角色">
                    <el-input placeholder="角色名称" v-model="keyword">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="default" :disabled="keyword ? false : true"
                        @click="taprolesoso">搜索</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card style="margin: 10px 0">
            <el-button type="primary" size="default" icon="Plus" @click="tapaddrole">
                增加角色
            </el-button>
            <el-table border style="margin: 10px 0;" :data="records">
                <el-table-column label="#" type="index" width="80px" align="center"></el-table-column>
                <el-table-column label="id" prop="id" align="center" width="180px"></el-table-column>
                <el-table-column label="角色名称" prop="roleName" align="center" show-overflow-tooltip
                    width="180px"></el-table-column>
                <el-table-column label="创建时间" prop="createTime" show-overflow-tooltip width="180px"></el-table-column>
                <el-table-column label="更新时间" prop="updateTime" align="center" show-overflow-tooltip
                    width="180px"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template #="{ row, $index }">
                        <el-button type="primary" icon="UserFilled" size="small" @click="setdistribute(row)">
                            分配权限
                        </el-button>
                        <el-button type="primary" icon="Check" size="small" @click="updateedit(row)">
                            编辑
                        </el-button>
                        <!-- <el-button type="primary" icon="Select">
                            删除
                        </el-button> -->
                        <el-popconfirm :title="`确定要删除 ${row.roleName} 吗?`" icon="DeleteFilled" icon-color="#f56c6c"
                            @confirm="deleteRole(row.id)">
                            <template #reference>
                                <el-button type="danger" size="small" icon="Delete">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination v-model:current-page="pageNo" v-model:page-size="limit" :page-sizes="[3, 5, 7, 9]"
                @current-change="getHassSpu" @size-change="changesize" :background="true"
                layout="prev, pager,next, jumper,->, sizes,total,  " :total="total" />
        </el-card>
        <!-- 增加 -->
        <el-dialog v-model="dialogVisite" :title="roleParams.id ? '修改' : '增加'">
            <el-form :model="roleParams" :rules="rules" ref="form">
                <el-form-item label="职业名称" prop="roleName">
                    <el-input placeholder="请你输入职位名称" v-model="roleParams.roleName"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button type="primary" size="default" @click="dialogVisite = false">取消</el-button>
                <el-button type="primary" size="default" @click="submitsave">确定</el-button>
            </template>
        </el-dialog>
        <!-- 分配 -->
        <el-drawer v-model="drawer" title="分配角色用户">
            <template #default>
                <el-tree :data="menuArr" show-checkbox node-key="id" default-expand-all :default-checked-keys="selectArr"
                    :props="defaultProps" ref="tree" />
            </template>
            <template #footer>
                <el-button type="primary" size="default" @click="drawer = false">取消</el-button>
                <el-button type="primary" size="default" @click="submenu">确定</el-button>
            </template>
        </el-drawer>
    </div>
</template>
<script setup>
import { getrole, addsave, updaterole, toAssign, doAssign, remove } from '@/api/acl/role.js'
import { ref, onMounted, reactive, nextTick } from 'vue'
let total = ref(0)
let pageNo = ref(1)
let limit = ref(3)
let form = ref()
// 关键字
let keyword = ref('')
// 数据
let records = ref([])
// 权限数组
let menuArr = ref([])
// 收集新增
let selectArr = ref()
let drawer = ref(false)
let dialogVisite = ref(false)
let roleParams = reactive({
    roleName: '',
    id: ''
})


// 校验规则
const rules = ref({
    roleName: [
        { required: true, message: '请输入角色名称', trigger: 'blur' },
        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
    ]
})
onMounted(() => {
    getHasrole()
})
const getHasrole = (page = 1) => {
    pageNo.value = page
    getrole(pageNo.value, limit.value, keyword.value).then(res => {
        console.log(res);
        if (res.code == 200) {
            total.value = res.data.total
            records.value = res.data.records
        }
    })
}
// 增加
const tapaddrole = () => {
    console.log(11111);
    dialogVisite.value = true
    console.log(roleParams);
    Object.assign(roleParams, {
        roleName: '',
        id: ''
    })
    nextTick(() => {
        form.value.clearValidate('roleName')
    })
}
// 搜搜
const taprolesoso = () => {
    getHasrole()
    keyword.valeu = ''
}
const getHassSpu = (val) => {
    getHasrole(val)
}
const changesize = (val) => {
    getHasrole()
}
const defaultProps = {
    children: 'children',
    label: 'name',
}

// 确定增加
const submitsave = async () => {
    await form.value.validate()
    console.log(roleParams.id);
    if (roleParams.id) {
        let result = await updaterole(roleParams)
        console.log(result);
        if (result.code == 200) {
            getHasrole()
            dialogVisite.value = false
            ElNotification({
                message: '成功',
                type: 'success',
                title: '修改成功'
            })
        } else {
            ElMessage.error(result.message)
        }
    } else {
        console.log(22);
        let result = await addsave(roleParams)
        if (result.code == 200) {
            getHasrole()
            dialogVisite.value = false
            ElNotification({
                message: '成功',
                type: 'success',
                title: '添加成功'
            })
        } else {
            ElMessage.error(result.message)
        }
    }
    // console.log(roleParams.roleName);
}
const filterSelectArr = (allData, initArr) => {
    allData.map((item) => {
        if (item.select && item.level === 4) initArr.push(item.id)
        if (item.children && item.children.length > 0) {
            filterSelectArr(item.children, initArr)
        }
    })
    return initArr
}
// 分配权限
const setdistribute = (row) => {
    console.log(row);
    Object.assign(roleParams, row)
    toAssign(roleParams.id).then(res => {
        console.log(res);
        if (res.code == 200) {
            menuArr.value = res.data
            console.log(res.data);
            selectArr.value = filterSelectArr(menuArr.value, [])
            console.log(selectArr.value);
            // selectArr.value = 
        }
    })
    drawer.value = true
}
let tree = ref(null)
// 确认分配
const submenu = async () => {
    // 职位id
    const roleId = roleParams.id
    // 获取选中节点的Id tree组件实例上有方法
    let arr = tree.value.getCheckedKeys()
    console.log(arr);
    // 半选的 id
    let arr1 = tree.value.getHalfCheckedKeys()
    console.log(arr1);
    let permissionId = [...arr, ...arr1]
    let res = await doAssign(roleId, permissionId)
    console.log(res);
    if (res.code !== 200) return ElMessage.error(res.message)
    ElMessage.success(res.message)
    window.location.reload()
}
// 编辑
const updateedit = (val) => {
    console.log(val);
    dialogVisite.value = true
    roleParams = val
    console.log(roleParams);
    nextTick(() => {
        form.value.clearValidate('roleName')
    })

}
// 删除
const deleteRole = async (val) => {
    let res = await remove(val)
    if (res.code == 200) {
        getHasrole()
        ElNotification({
            message: '成功',
            type: 'success',
            title: '删除成功'
        })
    } else {
        ElMessage.error(res.message)
    }
}
</script>
<style scoped lang="scss">
.form {
    display: flex;
    align-items: center;
}
</style>